import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import msgDetail from "./msg/msgDetail"
import { Route } from 'react-router-dom'

export default class msg extends Component {
    state = {
        msgList: []
    }

    componentDidMount() {
        this.setState({
            msgList: [
                { id: 1, name: "商品1" },
                { id: 2, name: "商品2" },
                { id: 3, name: "商品3" },
                { id: 4, name: "商品4" }
            ]
        })
    }
    render() {
        const { msgList } = this.state
        return (
            <div>
                <ul>
                    {
                        msgList.map((item, index) =>
                            <li key={index}>
                                <MyNavLink to={`/home/msg/msgDetail/${item.id}`} >{item.name}</MyNavLink>
                            </li>

                        )
                    }
                </ul>
                <Route path="/home/msg/msgDetail/:id" component={msgDetail}></Route>
            </div>
        )
    }
}
